<!-- 导出 -->
<template>
    <div class="export">
        <div class="export-set">
            <div class="set-item">请选择起始日期</div>
            <div :class="['set-input set-date',{'istips':!startDate}]" @click="openDayPicker(1)">{{startDate ? startDate:'起始日期'}}</div>
            <div class="set-item">请选择结束日期</div>
            <div :class="['set-input set-date',{'istips':!endDate}]" @click="openDayPicker(2)">{{endDate ? endDate:'结束日期'}}</div>
            <div class="set-item">请填写您的电子邮箱</div>
            <div class="set-input">
                <input type="text" placeholder="请输入电子邮箱" v-model="mailNum">
            </div>
            <div :class="['set-item class-item',{'allchose':allChose}]"><span @click="choseAll()">选择全部班级</span></div>
            <ul class="set-class clearfix">
                <li :class="['left',{'ischose':item.chose}]" v-for="(item,index) in classList" :key="index">
                    <span @click="choseClass(item)">{{item.name}}</span>
                </li>
            </ul>
            <div class="set-item">请填写您的电子邮箱</div>
            <div class="export-tips">
                <p>1.请选择您需要导出数据的班级，可多选。</p>
                <p>2.请选择您需要导出的时间区间，最长时间跨度为120天。</p>
                <p>3.请正确填写您的电子邮箱，统计文件将会发送至您的邮箱中。</p>
                <p>4.数据文件将会以“.xls”的Excel文件发送给您。</p>
                <p>5.若您没有收到邮件，建议您在邮箱的“垃圾邮件”中寻找。</p>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="btn-box-main">
            <div :class="['btn-blue shadow2',{'nopost':!canPost}]" @click="postExport()">导 出</div>
        </div>
        <!-- 时间选择 -->
        <mt-datetime-picker
            ref="picker"
            type="date"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            :endDate="pickerEndDate"
            v-model="pickerVal"
            @confirm="handleConfirm()">
        </mt-datetime-picker>
        <Loading v-show="loadingShow" :loadingShow="loadingShow" :loadingText="loadingText"></Loading>
    </div>
</template>

<script>
import * as api from '@/api/index'
import Loading from '@/components/LayerLoading'

export default {
    name: "export",
    components: { 
        Loading
    },
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            startDate:'',
            endDate:'',
            startDateStr:'',
            endDateStr:'',
            dateType:1,
            pickerEndDate:new Date(),
            pickerShow:false,
            pickerVal:'',                //选择器时间
            mailNum:localStorage.exportMail ? localStorage.exportMail : '',
            classList:this.$parent.myInfo.classJson?this.$parent.myInfo.classJson:[],  //可选班级
            allChose:false,
            // pickerEndDate:new Date(new Date().getTime()+119 * 1000 * 60 * 60 * 24),
            loadingShow:false,
            loadingText:'请稍后...',
        }
    },
    computed: {
        canPost(){
            let reguM=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
            let hasClass=this.classList.findIndex(c => c.chose === true);
            if(this.startDate && this.endDate && reguM.test(this.mailNum) && (hasClass!=-1)){
                localStorage.setItem("exportMail",this.mailNum)
                return true
            }else{
                return false
            }
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
        
    },
    mounted(){
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.classList.forEach((item,i) => {
                this.$set(item,'chose', false)
            });
            
        }
    },
    methods:{
        choseClass(item){
            item.chose=!item.chose

            let hasFalse=this.classList.findIndex(c => c.chose === false);
            if(hasFalse==-1){
                this.allChose=true
            }else{
                this.allChose=false
            }
            
        },
        choseAll(){
            if(this.allChose){
                this.allChose=false
                this.classList.forEach((item,i) => {
                    item.chose=false
                }); 
            }else{
                this.allChose=true
                this.classList.forEach((item,i) => {
                    item.chose=true
                });    
            }
            
        },
        //请求
        postExport(){
            this.loadingShow=true
            let classCode=''
            let className=''
            this.classList.forEach((item,i)=>{
                if(item.chose){
                    if(classCode){
                        classCode=classCode+','+item.code
                        className=className+','+item.name
                    }else{
                        classCode=item.code
                        className=item.name
                    }
                    
                }
            })
            api.axPost('ExportHistoryTask', {
                userid:this.userid,
                truename:this.$parent.myInfo.TrueName,
                mailAddress:this.mailNum,
                classcode:classCode,
                className:className,
                startdate:this.startDateStr,
                enddate:this.endDateStr,
            }).then(res => {
                if(res.ResultCode===1){
                    if(res.Value){
                        this.$LayerTip({
                            content:"导出成功，请在您的邮箱中查看",
                            time:1500,
                        });
                    }else{
                        this.$LayerTip({
                            content:"导出失败",
                            time:1500,
                        });
                    }
                }else{
                    this.$LayerTip({
                        content:"导出失败",
                        time:1500,
                    });
                }
                this.loadingShow=false
            })
        },
        // 选择时间
        openDayPicker(type) {
            this.$refs.picker.open();
            this.pickerShow=true;
            this.pickerVal=new Date();
            this.dateType=type
        },
        handleConfirm(){
            let year=this.pickerVal.getFullYear(); 
            let month=this.pickerVal.getMonth()+1;
            let date=this.pickerVal.getDate();
            let timeString=this.pickerVal.toTimeString().substring(0,5);
            
            let dayTimeJson=year+'-'+month+'-'+date+' '+timeString;
            if(this.dateType==1){
                this.startDate=year+'年'+month+'月'+date+'日';
                this.startDateStr=year+'-'+month+'-'+date
            }else{
                this.endDate=year+'年'+month+'月'+date+'日';
                this.endDateStr=year+'-'+month+'-'+date
            }
            this.$refs.picker.close();
            this.pickerShow=false;
        },
        getCountDown (time) {
            let countTime = new Date(time).getTime()-new Date().getTime()
            let countday = Math.ceil(countTime / 1000 / 60 / 60 / 24)
            return countday
        },
        
    }
}
</script>
<style type="text/css" scoped>
.export{
    padding: 0 0.32rem 1.6rem;
    min-height: 100%;
    box-sizing: border-box; 
}
.set-item{
    font-size: 0.3rem;
    font-weight: bold;
    /* color: #999; */
    padding-top: 0.62rem;
}
.set-input{
    height: 0.84rem;
    /*  */
    border: 1px solid #e0e0e0;
    border-radius: 0.44rem;
    box-sizing: border-box;
    padding: 0 0.48rem;
    font-size: 0.3rem;
    margin-top: 0.28rem;
}
.set-date{
    line-height: 0.84rem;
    box-sizing: border-box;
    background: url(~@/assets/img/icon/arrow-r-b.png) no-repeat right 0.38rem center;
    background-size: auto 0.22rem;
}
.set-input input{
    font-size: 0.3rem;
    height: 100%;
    background: transparent;
    width: 100%;
}
.set-input input::-webkit-input-placeholder{
    color: #ccc;
}
.set-input input::-moz-placeholder{
    color: #ccc;
}
.set-input input:-moz-placeholder{
    color: #ccc;
}
.set-input input:-ms-input-placeholder{
    color: #ccc;
}

.set-date.istips{
    color: #ccc;
}
.class-item{
    background: url(~@/assets/img/icon/allchose-n.png) no-repeat left 0 bottom 0;
    background-size: 0.44rem 0.44rem;
}
.class-item.allchose{
    background-image: url(~@/assets/img/icon/clock-t.png);
}
.class-item span{
    padding-left: 0.62rem;
}
.set-class li{
    padding: 0.3rem 0.09rem 0;
}
.set-class li span{
    color: #666;
    padding: 0 0.26rem;
    display: block;
    height: 0.64rem;
    line-height: 0.64rem;
    font-size: 0.26rem;
    background: #eff1f3;
    text-align: center;
    border-radius: 0.44rem;
}
.set-class li.ischose span{
    color: #fff;
    background: #02affe;
}
.export-tips{
    margin-top: 0.28rem;
    background: #f7f8f9;
    color: #999;
    line-height: 0.48rem;
    padding: 0.22rem 0.3rem;
    border-radius: 0.2rem;
}
.btn-box-main .btn-blue.nopost{
    opacity: 0.5;
}
</style>